<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
		<script src="./js/echarts.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
		<!-- 引入element样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入element组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	</head>
	<body>
		<div id="app">
			<div>
				<span>{{currentTime}}</span>
				<div style="text-align: center;">
					<h3>油站信息</h3>
					<span>油站总数：12</span> <span>今日在线油站：1</span>
				</div>
				<!-- 饼图组件 -->
				<pie-vcharts></pie-vcharts>
				<h3 style="text-align: center;">长期未在线TOP5</h3>
				<el-table :data="offlineTime" style="width: 100%">
					<el-table-column prop="name" label="名称" width="360">
					</el-table-column>
					<el-table-column prop="time" label="未在线时间" width="240">
					</el-table-column>
				</el-table>
			</div>
			
			<!-- 中国地图组件 -->
			<map-shuaungshuang></map-shuaungshuang>
			<!-- 折线图组件 -->
			<line_vcharts></line_vcharts>
		</div>
	</body>
	
	<!-- 注册饼图组件 -->
	<script>
		Vue.component('pie-vcharts',{
			data(){
				this.chartSettings = {
					
				}
				return{
					chartData:{
						 columns: ['日期', '访问用户', '下单用户'],
						  rows: [
						    { '日期': '2018-05-22', '访问用户': 3371, '下单用户': 610 },
						    { '日期': '2018-05-23', '访问用户': 2328, '下单用户': 398 },
						    { '日期': '2018-05-24', '访问用户': 5381, '下单用户': 410 }
						  ]
					}
				}
			},
			template:'<ve-pie :data="chartData" :settings="chartSettings"></ve-pie>'
		})
	</script>

	<!-- 注册地图组件 -->
	<script>
		Vue.component('map-shuaungshuang', {
			data() {
				this.chartSettings = {
					position: 'china',
					dimension: '位置',
					metrics: ['人口', '面积'],
					dataType: {
						'面积': 'KMB'
					}
				}
				return {
					chartData: {
						columns: ['位置', 'GDP'],
						rows: [{
								'位置': '吉林',
								'税收': 123,
								'人口': 123,
								'面积': 92134
							},
							{
								'位置': '北京',
								'税收': 1223,
								'人口': 2123,
								'面积': 29234
							},
							{
								'位置': '上海',
								'税收': 2123,
								'人口': 1234,
								'面积': 94134
							},
							{
								'位置': '浙江',
								'税收': 4123,
								'人口': 5123,
								'面积': 29234
							}
						]
					}
				}
			},
			template: '<ve-map :data="chartData" :settings="chartSettings"></ve-map>'
		});
		
	</script>

	<!-- 注册折线图组件 -->
	<script>
		Vue.component('line_vcharts',{
			data(){
				this.chartSettings = {
					axisSite:{
						left:['访问用户'], //左y轴数据
						right:['下单用户'] //右y轴数据
					},
					yAxisName:['访问用户','下单用户'] ,//左、右y轴名称
				}
				return{
					chartData:{
						columns: ['日期', '访问用户', '下单用户'],
						 rows: [
						   { '日期': '2018-05-22', '访问用户': 3371, '下单用户': 610 },
						   { '日期': '2018-05-23', '访问用户': 2328, '下单用户': 398 },
						   { '日期': '2018-05-24', '访问用户': 5381, '下单用户': 410 }
						 ]
					}
				}
			},
			template:'<ve-line :data="chartData" :settings="chartSettings"></ve-line>'
		})
	</script>
	
	<!-- 普通vue数据使用方法 -->
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				offlineTime: [{
						"name": "中牟加油站",
						"time": "6天前"
					},
					{
						"name": "新郑加油站",
						"time": "6天前"
					},
					{
						"name": "中原区A加油站",
						"time": "昨天"
					}
				],
				longtable: [{
						"date": "2020-10-21 14:58:56",
						"gasname": "荥阳B加油站",
						"油机号": 1,
						"枪号": 1,
						"燃油量": 30.16,
						"油气量": 27.85,
						"燃油流速": 23.44,
						"油气流速": 12.22,
						"气液比": 0.92
					},
					{
						"date": "2020-10-21 14:58:56",
						"gasname": "荥阳B加油站",
						"油机号": 1,
						"枪号": 1,
						"燃油量": 30.16,
						"油气量": 27.85,
						"燃油流速": 23.44,
						"油气流速": 12.22,
						"气液比": 0.92
					}
				],
				currentTime: "",
				timer: "", //定义一个定时器的变量
			},
			/**
			 * 获取当前时间，并每隔一秒刷新一次
			 * */
			created() {
				this.$nextTick(() => {
					// 在此处执行你要执行的函数 
					vm.timer = setInterval(() => {
						var that = this;
						var myDate = new Date();
						var time = myDate.toLocaleString(); //获取日期与时间
						var Week = ['日', '一', '二', '三', '四', '五', '六'];
						time += "   星期" + Week[myDate.getDay()] //获取当前星期X(0-6,0代表星期天)
						// console.log("time: " + currentTime);
						that.currentTime = time;
					}, 1000);
				});
			},
			mounted: function() {
				// this.testEcharts1();
			},
			methods: {
				testEcharts1: function() {
					// 基于准备好的dom，初始化echarts实例
					let myChart = echarts.init(document.getElementById('echarts1'));
			
					// 指定图表的配置项和数据
					var option = {
						tooltip: {
							trigger: 'item',
							formatter: '{a} <br/>{b}: {c} ({d}%)'
						},
						legend: {
							orient: 'vertical',
							left: 10,
							data: []
						},
						series: [{
							name: '访问来源',
							type: 'pie',
							radius: ['35%', '70%'],
							avoidLabelOverlap: false,
							label: {
								show: false,
								position: 'center'
							},
							emphasis: {
								label: {
									show: true,
									fontSize: '25',
									fontWeight: 'bold'
								}
							},
							labelLine: {
								show: false
							},
							data: [{
									value: 335,
									name: '直接访问'
								},
								{
									value: 158,
									name: '搜索引擎'
								}
							]
						}]
					};
					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);
				}
			},
			beforeDestroy() {
				if (this.timer) {
					// 在Vue实例销毁前，清除我们的定时器
					clearInterval(this.timer); 
				}
			}
		})
	</script>

	<script>

	</script>
</html>
